<template>
  <el-dialog v-model="visible" title="修改" :close-on-click-modal="false" :close-on-press-escape="false"
    style="width: 50%;">
    <el-form :model="dataForm" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="150px">
      <!-- <el-form-item label="id" data-field="id">
        <el-input v-model="dataForm.id" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="签到" data-field="isSign">
        <el-input v-model="dataForm.isSign" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="来源" data-field="ly">
        <el-input v-model="dataForm.ly" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="签到时间" data-field="signTime">
        <el-input v-model="dataForm.signTime" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" data-field="createTime">
        <el-input v-model="dataForm.createTime" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="修改人" data-field="updator">
        <el-input v-model="dataForm.updator" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="修改时间" data-field="updateTime">
        <el-input v-model="dataForm.updateTime" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="身份校验次数" data-field="verifyIdCardTime">
        <el-input v-model="dataForm.verifyIdCardTime" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否是黑名单" data-field="isBlackList">
        <el-input v-model="dataForm.isBlackList" placeholder="请输入"></el-input>
      </el-form-item> -->
      <el-form-item label="手机号" data-field="col1">
        <el-input v-model="dataForm.col1" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="公司" data-field="col2">
        <el-input v-model="dataForm.col2" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="姓名" data-field="col3">
        <el-input v-model="dataForm.col3" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="部门" data-field="col4">
        <el-input v-model="dataForm.col4" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="职位" data-field="col5">
        <el-input v-model="dataForm.col5" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="性别" data-field="col6">
        <el-input v-model="dataForm.col6" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" data-field="col7">
        <el-input v-model="dataForm.col7" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="电话" data-field="col8">
        <el-input v-model="dataForm.col8" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="地址" data-field="col9">
        <el-input v-model="dataForm.col9" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="备注" data-field="col10">
        <el-input v-model="dataForm.col10" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="联络结果" data-field="col50">
        <el-input v-model="dataForm.col50" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="关注的同期活动" data-field="col11">
        <el-input v-model="dataForm.col11" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="主营产品" data-field="col12">
        <el-input v-model="dataForm.col12" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="意向产品" data-field="col13">
        <el-input v-model="dataForm.col13" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="参观人数" data-field="col14">
        <el-input v-model="dataForm.col14" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="公司性质" data-field="col21">
        <el-input v-model="dataForm.col21" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="参观需求" data-field="col22">
        <el-input v-model="dataForm.col22" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="名片链接地址" data-field="col23">
        <el-input v-model="dataForm.col23" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否采购" data-field="col24">
        <el-input v-model="dataForm.col24" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="采购产品" data-field="col25">
        <el-input v-model="dataForm.col25" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="采购金额" data-field="col27">
        <el-input v-model="dataForm.col27" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="参观内容" data-field="col28">
        <el-input v-model="dataForm.col28" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="电话是否接通" data-field="col29">
        <el-input v-model="dataForm.col29" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="微信是否通过" data-field="col30">
        <el-input v-model="dataForm.col30" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否参加展会" data-field="col31">
        <el-input v-model="dataForm.col31" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <div style="text-align: center;">
        <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  id: "",
  gid: "",
  col1: "",
  col2: "",
  col3: "",
  col4: "",
  col5: "",
  col6: "",
  col7: "",
  col8: "",
  col9: "",
  col10: "",
  col11: "",
  col12: "",
  col13: "",
  col14: "",
  col21: "",
  col22: "",
  col23: "",
  col24: "",
  col25: "",
  col26: "",
  col27: "",
  col28: "",
  col29: "",
  col30: "",
  col31: "",
  col50: "",
  ly: "",
  signTime: "",
  isSign: "",
  createTime: "",
  updator: "",
  updateTime: "",
  isBlackList: "",
  verifyIdCardTime: "",
});

const init = (id: any, formData: any = {}, columns: any[] = []) => {
  visible.value = true;
  dataForm.id = id;

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }

  // 使用传入的表单数据初始化表单
  Object.assign(dataForm, formData);

  const columnMap = columns.reduce((acc, col) => {
    acc[col.colName] = true;
    return acc;
  }, {} as { [key: string]: boolean });

  // 在DOM更新后执行隐藏逻辑
  nextTick(() => {
    const formKeys = Object.keys(dataForm);
    formKeys.forEach(key => {
      if (!columnMap[key]) {
        const formItem = document.querySelector(`[data-field="${key}"]`);
        if (formItem) {
          (formItem as HTMLElement).style.display = 'none';
        }
      }
    });
  });

  if (id) {
    getInfo(id, columns);
  }
};

//数据显示
const getInfo = (id: number, columns: any[]) => {
  baseService.get("/noc/nocmember/" + id).then((res) => {
    Object.assign(dataForm, res.data);
    const columnMap = columns.reduce((acc: { [x: string]: boolean; }, col: { colName: string | number; }) => {
      acc[col.colName] = true;
      return acc;
    }, {} as { [key: string]: boolean });
    // 在数据更新后，再次在DOM更新后执行隐藏逻辑
    nextTick(() => {
      const formKeys = Object.keys(dataForm);
      formKeys.forEach(key => {
        if (!columnMap[key]) {
          const formItem = document.querySelector(`[data-field="${key}"]`);
          if (formItem) {
            (formItem as HTMLElement).style.display = 'none';
          }
        }
      });
    });
  }).catch((error) => {
    console.error('获取信息失败:', error);
    ElMessage.error('获取信息失败，请稍后重试');
  });
};



// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    (!dataForm.id ? baseService.post : baseService.put)("/noc/nocmember", dataForm).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
/* 可根据需要添加样式 */
</style>